<!--
 * @Date: 2023-03-05 15:48:17
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-03-25 12:31:54
 * @FilePath: \A19\frontend\src\components\FileSystem\File.vue
-->
<template>
  <div class="file">
    <div class="name">{{ name }}</div>
    <video id="video" :src="conf.server + url" v-if="type === 'video'" controls ></video>
    <audio id="audio" :src="conf.server + url" controls v-if="type === 'audio'"></audio>
    <div class="img" v-if="type === 'image'">
      <img :src="conf.server + url" :alt="name as string">
    </div>
    <iframe
      :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
        conf.server + url
      )}`"
      v-if="type === 'application'"
      width="100%"
      height="100%"
      frameborder="0"
    ></iframe>
    <!-- conf.server + url -->
    <div class="none" v-if="type === 'none'">
      <el-icon><Document /></el-icon>
    </div>
    <ElButton v-if="type !== 'application'" @click="download">下载</ElButton>
  </div>
</template>

<script lang="ts" setup>
import router from "@/route";
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import { useClientStore } from "../../pinia/stores/client";
import axios from "axios";
import { conf } from "@/utils/conf";

const {
  query: { url,name },
} = useRoute();

const type = computed(() => {
  if (url) {
    const index = url.lastIndexOf(".");
    const theType = (url.slice(index + 1) as string).toLowerCase();
    if(theType === 'pdf'){
      location.href = conf.server + url
      return
    }

    for (const key in typeMap) {
      if (
        typeMap[key].find((type) => {
          return type === theType;
        })
      ) {
        return key;
      }
    }

    return "none";
  } else {
    return "none";
  }
});

const typeMap: { [id: string]: Array<string> } = {
  video: [
    'mp4',
    'mpg',
    'mpe',
    'qt',
    'mov',
    'm4v',
    'wmv',
    'avi',
    'webm',
    'flv',
    'mkv'
  ],
  audio: [
    'mp3',
    'mid',
    'midi',
    'wav',
    'm3u',
    'm4a',
    'ogg',
    'ra',
    'flac'
  ],
  application: [
    "doc",
    "docx",
    "xls",
    "xlsx",
    "ppt",
    "pptx",
  ],
  image:[
    'gif',
    'jpg',
    'jpeg',
    'jpg2',
    'png',
    'tif',
    'tiff',
    'bmp',
    'webp',
    'ico',
  ]
};

const download = ()=>{
  self.open(conf.server + url + '?download=true')
}

onMounted(() => {
  //   if (url) {
  //     const index = url.lastIndexOf(".");
  //     const theType = url.slice(index + 1) as string;
  //     type.value = theType;
  //   }
});
</script>

<style lang="less" scoped>
.file {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .none {
    height: 200px;
    aspect-ratio: 1;
    // background-color: aliceblue;
    text-align: center;
    line-height: 200px;
    font-size: 150px;
    color:var(--el-color-primary);
  }

  .img{
    height: 80vh;
    img{
      height: 100%;
    }
    margin-bottom: 10px;
  }
  .name{
    font-size: 24px;
    font-weight: bold;
    margin:10px 0;
  }
  #video{
    height:70%;
    margin-bottom: 10px;
  }
  #audio{
    width: 30%;
    margin-bottom: 10px;
  }
}
</style>
